<template>
    <div style="height:100%">
        <el-container style="height: 100%;">

            <el-aside :width="sideWidth+'px'"
                      style="background-color: rgb(238, 241, 246);height: 100%;overflow-x: hidden">
                <ManageAside :isCollapse="isCollapse" :sideWidth="sideWidth"></ManageAside>
            </el-aside>

            <el-container>
                <el-header style=" font-size: 12px;line-height:60px;">
                    <HeaderAdise :collapseBtnClass="collapseBtnClass" :collapse="collapse"></HeaderAdise>
                </el-header>

                <el-main>
                    <router-view />
                </el-main>

            </el-container>
        </el-container>
    </div>

</template>

<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
</style>

<script>

    import ManageAside from "@/components/ManageAside";
    import HeaderAdise from "@/components/HeaderAdise";

    export default {
        data() {
            return {
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,
            }
        },
        components: {
            HeaderAdise,
            ManageAside
        },

        methods:{
            collapse() {
                this.isCollapse = !this.isCollapse;
                if (this.isCollapse) {
                    this.sideWidth = 64
                    this.collapseBtnClass = 'el-icon-s-unfold';
                } else {
                    this.sideWidth = 200
                    this.collapseBtnClass = 'el-icon-s-fold';
                }
            },
        }
    }

</script>
